<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
                @change="depIdChange"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">设备分类：</label>
            <el-input
                v-model="searchForm.facilitySort"
                placeholder="请输入设备分类"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">设备地点：</label>
            <el-input
                v-model="searchForm.facilityLocations"
                placeholder="请输入设备地点"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">设备名称：</label>
            <el-input
                v-model="searchForm.facilityName"
                placeholder="请输入设备名称"
                style="width: 145px"
            />
        </div>

        <div class="filter-item">
            <label for="">设备唯一识别码：</label>
            <el-input
                v-model="searchForm.facilityNumber"
                placeholder="请输入设备唯一识别码"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">设备状态：</label>
            <el-select
                v-model="searchForm.facilityState"
                class="m-2"
                placeholder="请选择设备状态"
                style="width: 145px"
            >
                <el-option
                    v-for="item in facilityStateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">设备分级：</label>
            <el-select
                v-model="searchForm.facilityLevel"
                class="m-2"
                placeholder="请选择设备分级"
                style="width: 145px"
            >
                <el-option
                    v-for="item in facilityLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">规格型号：</label>
            <el-input
                v-model="searchForm.specificationModel"
                placeholder="请输入规格型号"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">供应商/厂家：</label>
            <el-input
                v-model="searchForm.facilitySupplier"
                placeholder="请输入供应商/厂家"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">资产编号：</label>
            <el-input
                v-model="searchForm.assetNumber"
                placeholder="请输入资产编号"
                style="width: 145px"
            />
        </div>

        <div class="filter-item">
            <label for="">标签名称：</label>
            <el-select
                v-model="searchForm.tagName"
                class="m-2"
                placeholder="请选择标签名称"
                style="width: 145px"
                clearable
            >
                <el-option
                    v-for="item in labelList"
                    :key="item.tagName"
                    :label="item.tagName"
                    :value="item.tagName"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="search"
            >查询</el-button>
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="reset"
            >重置</el-button>
        </div>
    </div>
    <div class="options">
        <div class="overview">
            <!-- 设备概括 -->
            <el-tag class="ml-2">设备总数({{ equipmentOverview.total }})</el-tag>
            <el-tag
                class="ml-2"
                type="success"
            >正常({{ equipmentOverview.useCount }})</el-tag>
            <el-tag
                class="ml-2"
                type="info"
            >备用({{ equipmentOverview.standbyCount }})</el-tag>
            <el-tag
                class="ml-2"
                type="warning"
            >维修({{ equipmentOverview.repairCount }})</el-tag>
            <el-tag
                class="ml-2"
                type="danger"
            >已报废({{ equipmentOverview.scrapCount }})</el-tag>
        </div>
    </div>
    <div class="dataList">
        <el-table
            ref="singleTableRef"
            :data="dataList"
            style="width: 100%"
            @current-change="handleCurrentChange"
            border
            size="small"
            :height="hHeight - 40 + 'px'"
        >
            <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
            />
            <el-table-column
                label="所属单位"
                prop="depId"
                align="center"
                width="72"
            >
                <template #default="scope">
                    <div>{{ depIdName(scope.row.depId) }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="设备名称"
                prop="facilityName"
                align="center"
                width="122"
            />
            <el-table-column
                label="设备分类"
                prop="facilitySort"
                align="center"
                width="72"
            />
            <el-table-column
                label="设备分级"
                prop="facilityLevel"
                align="center"
                width="66"
            />
            <el-table-column
                label="规格型号"
                prop="specificationModel"
                align="center"
                width="140"
            />
            <el-table-column
                label="设备唯一识别码"
                prop="facilityNumber"
                align="center"
                width="160"
            />
            <el-table-column
                label="设备地点"
                prop="facilityLocations"
                align="center"
                width="132"
            />
            <el-table-column
                label="资产编号"
                prop="assetNumber"
                width="66"
                align="center"
            />
            <el-table-column
                label="设备状态"
                prop="facilityState"
                align="center"
                width="72"
            >
                <template #default="scope">
                    <div>{{ facilityStateName(scope.row.facilityState) }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="数量"
                prop="facilityNumbers"
                align="center"
                width="50"
            />
            <el-table-column
                label="单位"
                prop="unit"
                align="center"
                width="50"
            />
            <el-table-column
                label="供应商/厂家"
                prop="facilitySupplier"
                width="142"
                align="center"
            />
            <el-table-column
                label="是/否纳入特许经营权"
                prop="franchising"
                width="78"
                align="center"
            />
            <el-table-column
                label="采购时间"
                prop="purchaseTime"
                width="90"
                align="center"
            />
            <el-table-column
                label="开始使用时间"
                prop="startTime"
                width="90"
                align="center"
            />
            <el-table-column
                label="主要技术参数"
                prop="technicalParameter"
                width="400"
                align="center"
            />
            <el-table-column
                label="操作"
                fixed="right"
                width="185"
                align="center"
            >
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleRepairRecord(scope.row)"
                    >维修记录</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        :disabled="scope.row.facilityState == '3'"
                        @click="handleStartRepair(scope.row)"
                    >转维修</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            v-model:current-page="searchForm.pageNo"
            v-model:page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100, 200]"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="paginationStyle"
        />
    </div>
    <el-dialog
        v-model="recordListVisible"
        title="维修记录"
        width="1100"
    >
        <div style="margin: 0px 20px 0">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">设备名称：</label>
                        <span>{{ currentRowDate.facilityName }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">唯一识别码：</label>
                        <span>{{ currentRowDate.facilityNumber }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">设备状态：</label>
                        <span>{{
                            currentRowDate.facilityState == "1"
                                ? "在用"
                                : "停用"
                        }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">所属单位：</label>
                        <span>{{
                            depNameTranslate(currentRowDate.depId)
                        }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">设备地点：</label>
                        <span>{{ currentRowDate.facilityLocations }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">设备分类：</label>
                        <span>{{ currentRowDate.facilitySort }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">设备分级：</label>
                        <span>{{ currentRowDate.facilityLevel }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">规格型号：</label>
                        <span>{{ currentRowDate.specificationModel }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">资产编号：</label>
                        <span>{{ currentRowDate.assetNumber }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">数量：</label>
                        <span>{{ currentRowDate.facilityNumbers }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">单位：</label>
                        <span>{{ currentRowDate.unit }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">供应商/厂家：</label>
                        <span>{{ currentRowDate.facilitySupplier }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">采购时间：</label>
                        <span>{{ currentRowDate.purchaseTime }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">开始使用时间：</label>
                        <span>{{ currentRowDate.startTime }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <label for="">是/否纳入特许经营权：</label>
                        <span>{{ currentRowDate.franchising }}</span>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="">主要技术参数：</label>
                        <span>{{ currentRowDate.technicalParameter }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-button
            type="primary"
            @click="exportRepairRecords"
        >导出记录</el-button>
        <el-table
            :data="repairRecordList"
            border
            style="margin-top: 10px"
        >
            <el-table-column
                type="index"
                label="序号"
                width="55"
            />
            <el-table-column
                prop="failureDesc"
                label="故障描述"
            />
            <el-table-column
                prop="items"
                label="维修内容"
            >
                <el-table-column
                    prop="lube"
                    label="润滑油、脂"
                />
                <el-table-column
                    prop="mechanicalSeal"
                    label="机封"
                />
                <el-table-column
                    prop="bearing"
                    label="轴承"
                />
                <el-table-column
                    prop="other"
                    label="其他"
                />
            </el-table-column>
            <el-table-column
                prop="reportDate"
                label="报修日期"
            />
            <el-table-column
                prop="cpmpletedDate"
                label="维修完成日期"
            />
            <el-table-column
                prop="repairUser"
                label="检修人"
            />
            <el-table-column
                prop="acceptanceUser"
                label="验收人"
            />
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="recordListVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog
        v-model="toRepairVisible"
        title="转维修"
        width="600"
    >
        <el-form label-width="120">
            <el-form-item
                label="分配维修人："
                prop="nextUser"
            >
                <el-select
                    v-model="nextUser"
                    placeholder="请选择维修人"
                    style="width: 200px"
                    filterable
                >
                    <el-option
                        v-for="item in userList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="故障描述："
                prop="flowDesc"
            >
                <el-input
                    v-model="flowDesc"
                    type="textarea"
                ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="toRepairVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="toRepairConfirm"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
  <script setup>
import equipmentHttp from "@/https/equipment.js";
import labelHttp from "@/https/label.js";
import schedulingHttp from "@/https/scheduling.js";
import userHttp from "@/https/user.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage } from "element-plus";
import { nextTick, onMounted, reactive, ref } from "vue";
let searchForm = reactive({
    assetNumber: "",
    depId: "",
    facilityLevel: "",
    facilityLocations: "",
    facilityName: "",
    facilityNumber: "",
    facilitySort: "",
    facilityState: "",
    facilitySupplier: "",
    specificationModel: "",
    tagName: "",
    pageNo: 1,
    pageSize: 10,
});
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;
let equipmentOverview = ref({});
const depIdList = ref([
    { label: "全部", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const batchAdddepIdList = ref([
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
]);
const depIdName = (id) => {
    return id == "1"
        ? "公司"
        : id == "2"
            ? "星沙厂"
            : id == "3"
                ? "城西厂"
                : id == "4"
                    ? "城北厂"
                    : id == "5"
                        ? "城南厂"
                        : "城东厂";
};
const facilityStateName = (id) => {
    return id == "1"
        ? "在用"
        : id == "2"
            ? "备用"
            : id == "3"
                ? "维修"
                : id == "4"
                    ? "报废"
                    : "其他";
};
const facilityLevelList = ref([
    { label: "全部", value: "" },
    { label: "A", value: "A" },
    { label: "B", value: "B" },
    { label: "C", value: "C" },
    { label: "其他", value: "其他" },
]);
const facilitySortList = ref([]);
const facilityStateList = ref([
    { label: "在用", value: "1" },
    { label: "备用", value: "2" },
    { label: "维修", value: "3" },
    { label: "报废", value: "4" },
    { label: "其他", value: "5" },
]);

const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
const dataList = ref([]);

const depIdChange = () => {
    searchForm.facilitySort = "";
    searchForm.tagName = ''
    getFacilitySort();
    getBatchlabelListSelect();
};

const hHeight = ref(0);
onMounted(() => {
    hHeight.value = document.documentElement.clientHeight - 350;
    search();
    getFacilitySort();
    getBatchlabelListSelect();
});
const labelList = ref([])
const getBatchlabelListSelect = async () => {
    let params = {
        depId: searchForm.depId == '1' ? '' : searchForm.depId,
        tagName: "",
        pageNo: 1,
        pageSize: 10000,
    }
    const res = await labelHttp.tagPageList(params);
    if (res.data.code === 200) {
        labelList.value = res.data.data.records;
    }
}
const getFacilitySort = () => {
    equipmentHttp.getFacilitySort(searchForm.depId).then((res) => {
        facilitySortList.value = [];
        res.data.data.forEach((item) => {
            facilitySortList.value.push({
                label: item,
                value: item,
            });
        });
    });
};
const facilitySituation = () => {
    equipmentHttp.facilitySituation(searchForm.depId).then((res) => {
        if (res.data.code == 200) {
            console.log(res.data);
            nextTick(() => {
                equipmentOverview.value = res.data.data;
            });
        }
    });
};
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
const search = () => {
    equipmentHttp.queryFacility(searchForm).then((res) => {
        if (res.data.code == 200) {
            dataList.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    });
    facilitySituation();
};
let recordListVisible = ref(false);
const currentRowDate = ref({});

const repairRecordList = ref([]);

const handleRepairRecord = async (row) => {
    recordListVisible.value = true;
    currentRowDate.value = row;
    let params = {
        equipId: row.id,
        facilityName: row.facilityName,
        assetNumber: row.assetNumber,
        status: "90",
    };
    const res = await equipmentHttp.equipRepairQueryRepairRecord(params);
    if (res.data.code == 200) {
        console.log(res.data.data);
        let arr = [];
        res.data.data.records.forEach((item) => {
            arr.push({ ...item, ...item.items });
        });
        repairRecordList.value = arr;
        console.log(repairRecordList.value, "equipRepairQueryRepairRecord");
    }
};
const exportRepairRecords = async () => {
    let params = {
        equipId: currentRowDate.value.id,
        facilityName: currentRowDate.value.facilityName,
        assetNumber: currentRowDate.value.assetNumber,
        status: "90",
    };
    equipmentHttp.equipRepairExportSingleRepair(params).then((response) => {
        console.log(response);
        const content = response.data;
        const blob = new Blob([content], { type: "application/ms-excel" });
        let fileName = `维修记录.xls`;
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    });
};

const userList = ref([]);
const userQueryUserList = async () => {
    let params = {
        depId: currentRowDate.value.depId,
        isDelete: 0,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await userHttp.userQueryUserList(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.realName;
            item.value = item.id + "";
        });
        userList.value = res.data.data.records;
    }
};
const groupList = ref([]);
// 查询班组信息
const getWorkteamsQueryWorkTeams = async () => {
    let params = {
        depId: currentRowDate.value.depId,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await schedulingHttp.workteamsQueryWorkTeams(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.teamName;
            item.value = item.id;
        });
        groupList.value = res.data.data.records;
    }
};
let toRepairVisible = ref(false);
const nextUser = ref("");
const flowDesc = ref("");

const handleStartRepair = async (row) => {
    toRepairVisible.value = true;
    nextUser.value = "";
    flowDesc.value = "";
    currentRowDate.value = row;
    getWorkteamsQueryWorkTeams();
    userQueryUserList();
};
const toRepairConfirm = async () => {
    if (nextUser.value == "") {
        ElMessage({
            type: "warning",
            message: "请选择维修人",
        });
        return;
    }
    let params = {
        equipId: currentRowDate.value.id,
        nextUser: nextUser.value,
        failureDesc: flowDesc.value,
    };
    const res = await equipmentHttp.equipRepairConvertRepair(params);
    if (res.data.code == 200) {
        console.log(res.data.data);
        search();
        toRepairVisible.value = false;
        ElMessage({
            type: "success",
            message: "转维修成功",
        });
    } else {
        ElMessage({
            type: "error",
            message: res.data.data.msg,
        });
    }
};
const reset = () => {
    searchForm.assetNumber = "";
    searchForm.depId = localTypeUnit.value;
    searchForm.facilityLevel = "";
    searchForm.facilityLocations = "";
    searchForm.facilityName = "";
    searchForm.facilityNumber = "";
    searchForm.facilitySort = "";
    searchForm.facilityState = "";
    searchForm.facilitySupplier = "";
    searchForm.specificationModel = "";
    searchForm.tagName = ''
    searchForm.pageNo = 1;
    searchForm.pageSize = 10;
    search();
};
</script>
  
  <style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
.options {
    margin: 20px 0 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    .ml-2 {
        margin-right: 10px;
    }
}
.preview {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.equipmentPagination {
    justify-content: flex-end;
    margin-top: 10px;
}
.grid-content {
    line-height: 2;
}
:deep .el-table__header .cell {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
:deep .el-table__cell {
    padding: 0 !important;
}
:deep .el-table__cell .cell {
    padding: 0 !important;
    font-size: 12px;
    text-align: center;
}
</style>
  